<!--
    用户管理->推荐记录
-->
<template>
  <div class="userConsume">
     <el-dropdown-item @click.native="handleTag">推荐记录</el-dropdown-item>
      <el-dialog  width="1100px" v-dialogDrag destroy-on-close :append-to-body='true' :visible.sync="recommendVisible" @close="recommendVisible = false">
        <template v-slot:title>
            <p style="font-size: 16px;margin-bottom: 0px;">手机号为<span class="red">{{statusRow.telephone}}</span>用户的推荐加盟记录 <span style="margin-left:15px">成功加盟人数:</span><span class="red">{{joinSuccess}}人</span> </p>
        </template>
        <el-table :data="recommendList" style="width: 100%" border :height="600"  stripe v-el-table-infinite-scroll="dialogTableListScroll">
          <el-table-column prop="unionCode" label="加盟编码" ></el-table-column>
          <el-table-column prop="userName" label="姓名" ></el-table-column>
          <el-table-column prop="levelName" label="会员等级" ></el-table-column>
          <el-table-column prop="auditStatus" label="审核状态" ></el-table-column>
          <el-table-column prop="name" label="评价时间" align="center">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.modifyDate) }}</span>
            </template>
          </el-table-column>
          <p slot="append" style="text-align:center; line-height:48px;" v-if="tableLoading">正在加载...</p>
          <p slot="append" style="text-align:center; line-height:48px;" v-if="tableIsMore">没有更多了</p>
        </el-table>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="recommendVisible = false" size="small" >关 闭</el-button>
        </div>
      </el-dialog>
  </div>


</template>

<script>
  import { getRecommendedInfo } from '@/api/getData';
  import elTableInfiniteScroll from 'el-table-infinite-scroll';
 export default {
   name: 'userConsume',
   directives: {
     'el-table-infinite-scroll': elTableInfiniteScroll
   },
   props: ['id','statusRow'],
   data(){
     return{
       recommendVisible:false,
       userLoading:false,
       recommendList:[],

       pageNum:1,
       pageSize:20,
       total:0,
       isNextPage:true,
       tableLoading:false,//弹框表格 正在加载
       tableIsMore:false,//弹框表格 没有更多
       joinSuccess:''
     }
   },

   mounted() {
   },
   methods:{
      handleTag(){
        this.recommendList = [];
        this.pageNum= 1;
        this.recommendVisible = true;
        this.dataInfo();
      },
      async dataInfo(){
        try {
          let data = {
             pageNum:this.pageNum,           pageSize:this.pageSize,
            customerId:this.id
          }
          this.tableLoading = true;
          this.tableIsMore = false;
          this.isNextPage = true;
          const result = await getRecommendedInfo(data);
          if (result.code == 200) {
             this.joinSuccess = result.data.count;
             this.recommendList = this.recommendList.concat(result.data.list);
             this.total = result.data.total;
              if(result.data.list.length<20 && (this.pageNum != '1')){
                  this.tableIsMore = true;
              }
              if(result.data.list.length<20){/*判断是否有下一页*/
                this.isNextPage = false;
              }else{

                this.isNextPage = true;
              }
          } else {
            this.$message.error(result.msg);
          }
          this.$nextTick(()=>{
            this.tableLoading = false
          })
        } catch (err) {
           this.loading = false;
          console.log(err)
        }
      },
      dialogTableListScroll(){/*弹框列表滚动*/
        if(this.isNextPage && !this.tableLoading){
          this.pageNum++;
          this.dataInfo();
        }
      },
   }
 }
</script>

<style lang="scss" scoped>
  .rateBox /deep/ .el-rate__icon{
    margin-right: 0px;
  }
  .rateBox>p{
    margin: 0px;
  }
  .rateBox>p> /deep/ .el-rate{
    height:25px;
    line-height:25px;
    display:flex;
  }
  .rateBox>p> /deep/ .el-rate .el-rate__item{
    display:flex;
    align-items: center;
  }
  .rateBox .rateText{
    width:60px;
  }
  .rateBox .content{
    display: flex;
  }
  .rateBox .el-tooltip{
        width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
  }
  .rateBox>p{
    height:18px
  }
</style>
